<template>
  <div class="content_box">
    <div class="msg_box">
      <div class="box">
        <p class="title">充值金额</p>
        <p class="price">
          <input v-model.trim="formData.amount" type="text" placeholder="请输入充值金额">
          <span>元</span>
        </p>
      </div>
      <div class="box">
        <p class="title">赠送金额</p>
        <p class="price">
          <input v-model.trim="formData.giveAway" type="text" placeholder="请输入赠送金额">
          <span>元</span>
        </p>
      </div>
      <div class="box">
        <p class="title">是否推荐</p>
        <div class="yj">
          <p 
          @click="clickStatus(index)" 
          :class="statusIndex == index?'on':''" 
          v-for="(item,index) in status_list" :key="index">{{item.label}}</p>
        </div>
      </div>
    </div>
    <div class="anniu_box">
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        :loading-text="formData.id?'修改中...':'新增中...'"
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >{{formData.id?'立即修改':'立即新增'}}</van-button>
    </div>
  </div>
</template>
 
<script>
import {
  addRechargeAmount,
  updateRechargeAmount,
  getById
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      status_list:[
        {
          value:'0',
          label:'不推荐',
        },
        {
          value:'1',
          label:'推荐',
        },
      ],
      statusIndex:0,
      formData:{
        amount:'',// 充值金额
        giveAway:'',// 赠送金额
        suggest:'0',// 是否推荐
        storeId:''
      },
      loading:false
    };
  },
  onShow() {},

  methods: {

    // 回显
    getHuixian(id){
      this.$showLoading('加载中...')
      getById({id}).then(res=>{
        if(res.statusCode == '00000'){
          if(res.data.suggest){
            this.statusIndex = 1
          }else{
            this.statusIndex = 0
          }
          this.formData = res.data
          wx.hideLoading()
        }else{
          wx.hideLoading()
        }
      })
    },

    // 是否启用店铺
    clickStatus(index){
      this.statusIndex = index
      this.formData.suggest = this.status_list[index].value
    },

    // 提交
    submit(){
      let zs = /^\+?[1-9][0-9]*$/;
      if(!this.formData.amount){
        this.$toast('请输入充值金额')
        return
      }

      if(!this.formData.giveAway){
        this.$toast('请输入赠送金额')
        return
      }
    
      this.$showLoading(this.formData.id?'修改中...':'新增中...')
      this.loading = true
      let returnData = this.formData.id?updateRechargeAmount(this.formData):addRechargeAmount(this.formData)
      returnData.then(res=>{
        if(res.statusCode == '00000'){
          this.loading = false
          wx.navigateBack({
            delta: 1
          });
          wx.hideLoading()
          this.$toast(this.formData.id?'修改成功':'新增成功')
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },

  },
  onHide() {},
  onLoad(options) {
    this.formData.storeId = options.storeId
    if(options.id){
      this.formData.id = options.id
      this.getHuixian(options.id)
    }else{
      delete this.formData.id
    }
  },
  onUnload() {
    this.statusIndex = 0
    this.formData = {
      amount:'',
      giveAway:'',
      suggest:'0',
    }
  },
};
</script>

<style lang="scss" scoped>
.msg_box{
  margin:0 30rpx;
  .box{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28rpx;
    color:#222;
    border-bottom:1px solid #f5f5f5;
    .title{
      font-weight: 500;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #1E68FF;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size:24rpx;
        margin-left:20rpx;
      }
    }
    .price{
      display: flex;
      align-items: center;
      input{
        text-align: right;
        margin-right:20rpx;
      }
    }
    .yj{
      display: flex;
      align-items: center;
      p{
        width: 140rpx;
        padding:8rpx 0;
        background: #F1F3F4;
        border-radius: 10rpx;
        font-size:28rpx;
        margin-right:30rpx;
        text-align: center;
      }
      .on{
        background: #1E68FF;
        color:#fff;
      }
      input{
        text-align: right;
        margin-right:20rpx;
        font-size:28rpx;
      }
      span{
        font-size:28rpx;
      }
    }
  }
}
.anniu_box{
  margin:50rpx 30rpx;
}
</style>
